<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章信息展示</title>
    <style>
        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a{
            text-decoration: none;
            color: #404040;
        }
        .wrap{
            width: 600px;
            margin: 0 auto;
        }

        .news-list {
            width: 600px;
        }

        .news {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid #999;
        }

        .info {
            display: flex;
            width: 200px;
            justify-content: space-between;
            font-size: 12px;
            color: #888;
        }

        .tips {
            display: flex;
            width: 60px;
            justify-content: space-between;
        }
        .news-list{
            min-height: 686px;
        }
        .news-list li:nth-child(5) {
            border-bottom: none;
        }
        .pagination{
            display: flex;
            width: 300px;
            text-align: center;
            background-color: rgb(252, 238, 238);
            border-radius: 25px;
            overflow: hidden;
            margin: 0 auto;
        }
        .pagination a{
            width: 30px;
            line-height: 30px;
            color: #404040;
            flex:1;
        }
        .pagination a:nth-child(1) {
            transform: rotate(-45deg) ;
        }
        .pagination .next {
            transform: rotate(45deg) ;
        }
        .pagination a:hover{
            color: rgb(247, 73, 73);
        }
        .newsContainer{
            width: 400px;
        }
        .news img{
            width: 140px;
            height: 88px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="news-list">
            <li class="news">
                <a href="javascript:;">
                    <img src="./img/img.png" alt="">
                </a>
                <div class="newsContainer">
                    <h3>
                        <a href="javascript:;" class="title">18人死伤！韩国一男子纵火后持凶器伤害避险邻居</a>
                    </h3>
                    <div class="info">
                        <span class="tips"><span>纵火</span><span>韩国</span><span>逮捕</span></span>
                        <!-- <span class="line"></span> -->
                        <span class="time">| &nbsp;&nbsp;1小时前</span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="pagination">
            <a href="javascript:;" class="prev">⌜</a>
            
            <a href="javascript:;" class="next">⌝</a>
        </div>
    </div>
	<script src="../ajax.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let perPage = 5; //每页显示的数量
	
		// 通过数据库获取数据在渲染视图；
		var listEle = document.querySelector(".news-list");
		ajax({
			url:"./php/getdata.php",
			dataType:"json",
			data:{
				count:perPage
			},
			success(res){
				console.log(res);
				renderDom(res);
			}
		})
		
		
		function renderDom(data){
			listEle.innerHTML = "";
			data.forEach(item=>{
				var liEle = document.createElement("li");
				liEle.classList.add("news");
				liEle.setAttribute("id",item.id);
				liEle.innerHTML = ` <a href="javascript:;">
										<img src="../addnews/php/${item.imgurl}" alt="">
									</a>
									<div class="newsContainer">
										<h3>
											<a href="javascript:;" class="title">${item.title}</a>
										</h3>
										<div class="info">
											<span class="tips"><span>纵火</span><span>${item.country}</span><span>${item.type}</span></span>
											<!-- <span class="line"></span> -->
											<span class="time">| &nbsp;&nbsp;1小时前</span>
										</div>
									</div>`;
				liEle.onclick = function(){
					window.location.href = "detail.html?id="+this.getAttribute("id");
				}
				listEle.appendChild(liEle);
			})
			
		}
		
		
		//分页 ；一、.分页数量？？？   1.每页显示多少条 5条    2.总条数有关系  向上取整 ceil();
			// 21  --- 5  ----》页码 5
			
			// 二、通过页面 查询数据
			// 已知  页码 1 2 3  可以通过js获取
				// 如何通过页面 查询对应的数据库里的数据    1 -----> LIMIT 0,5
														// 2----->LIMINT 5,5
														// 3 ------->LIMINT 10,5
														// p ------>LIMIT (p-1)*COUNT,COUNT
		
		
		
		// 分页 ：一、获取总页码；
		ajax({
			url:"./php/getTotalPage.php",
			data:{
				count:perPage  // 每个分页需要显示多少条数据
			},
			dataType:"json",
			success(res){
				// console.log(res);
				// 根据p生成页码
				createPage(res.p);
			}
		})
		
		function createPage(p){
			var paginationEle = document.querySelector(".pagination");
			var nextEle = document.querySelector(".next");
			for(var i=1;i<=p;i++){
				var a = document.createElement("a");
				a.href="javascript:;";
				a.innerHTML = i;
				paginationEle.insertBefore(a,nextEle);
				
				a.onclick = function(){
					// 当前的页码  每页显示的数量 perPage
					// 1  5  -----》 LIMIT 0,5
					// 2  5 ------->LIMIT 5,5
					// 3  5 ------>LIMIT (p-1)*perPage,perPage
					let page = this.innerHTML;
					// console.log(page);
					ajax({
						url:"./php/getPageData.php",
						data:{
							page,
							perPage
						},
						dataType:"json",
						success(res){
							console.log("??",res);
							renderDom(res);
						}
					})
					
				}
				
				
			}
			
		}
		
		
		
	</script>
</body>
</html>